<template>
  <div class="body">
    <van-sticky>
      <van-search
        v-model="search"
        background="#3DCEB9"
        shape="round"
        input-align="center"
        placeholder="搜索商品"
        v-on:search="onSearch"
      />
    </van-sticky>
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) of sortStudent" :key="index">
          <van-image use-loading-slot class="grid-pic" :src="item.pic" >
              <van-loading
                slot="loading"
                type="spinner"
                size="20"
                vertical
              />
            </van-image>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="grid">
        <van-grid column-num="5" :border="false" square>
          <van-grid-item icon="photo-o" v-for="(item,index) of indexData.categroy" :key="index" :to="{path:'/classGoods',query:{id:item.id}}">
            <van-image use-loading-slot class="grid-pic" :src="item.pic" round>
              <van-loading
                slot="loading"
                type="spinner"
                size="20"
                vertical
              />
            </van-image>
            <p class="grid-title">{{item.name}}</p>
          </van-grid-item>
        </van-grid>
    </div>
    <van-cell-group v-if="indexData.is_activity">
      <van-cell title="特价爆品"/>
    </van-cell-group>
    <van-grid class="act-content" column-num="2">
      <van-grid-item :to="'/goodInfo?id='+item.id" use-slot v-for="(item,index) of indexData.is_activity" :key="index" square>
        <van-image use-loading-slot class="grid-pic" :src="item.image" width="150" height="100">
          <van-loading
            slot="loading"
            type="spinner"
            size="20"
            vertical
          />
        </van-image> 
        <p class="new-title">{{item.name}}</p>
        <div class="new-info">
          <div>
            <p class="my-price">￥{{item.act_price}}</p>
            <p class="ot-price" >￥{{$store.getters.wxUserInfo.is_believe?item.ot_price:item.price}}</p>
          </div>
          <p class="iconfont icon-qiang"></p>
        </div>
      </van-grid-item>
    </van-grid>
    <!-- <van-empty image="../assets/coming_soon.png"/> -->
    <div class="no-data"  v-if="!indexData.is_activity.length">
      <i class="iconfont icon-jingqingqidai"></i>
    </div>
    <van-cell-group v-if="indexData.is_hot">
      <van-cell title="热门爆品"/>
    </van-cell-group>
        <van-grid column-num="2">
      <van-grid-item :to="'/goodInfo?id='+item.id" use-slot v-for="(item,index) of indexData.is_hot" :key="index" square>
        <van-image use-loading-slot class="grid-pic" :src="item.image" width="150" height="100">
          <van-loading
            slot="loading"
            type="spinner"
            size="20"
            vertical
          />
        </van-image> 
        <p class="new-title">{{item.name}}</p>
        <div class="new-info">
          <div>
            <p class="my-price">￥{{$store.getters.wxUserInfo.is_believe?item.price:item.ot_price}}</p>
            <!-- <p class="ot-price" v-show="$store.getters.wxUserInfo.is_believe">￥{{item.ot_price}}</p> -->
          </div>
          <p class="iconfont hot-icon icon-huobao"></p>
        </div>
      </van-grid-item>
    </van-grid>
    <!-- <van-empty image="../assets/coming_soon.png"/> -->
    <div class="no-data" v-if="!indexData.is_hot.length">
      <i class="iconfont icon-jingqingqidai"></i>
    </div>
    <van-cell-group v-if="indexData.is_new">
      <van-cell title="新品推荐"/>
    </van-cell-group>
    <van-grid column-num="2">
      <van-grid-item :to="'/goodInfo?id='+item.id" use-slot v-for="(item,index) of indexData.is_new" :key="index" square>
        <van-image use-loading-slot class="grid-pic" :src="item.image" width="150" height="100">
          <van-loading
            slot="loading"
            type="spinner"
            size="20"
            vertical
          />
        </van-image> 
        <p class="new-title">{{item.name}}</p>
        <div class="new-info">
          <div>
            <p class="my-price">￥{{$store.getters.wxUserInfo.is_believe?item.price:item.ot_price}}</p>
            <!-- <p class="ot-price" v-show="$store.getters.wxUserInfo.is_believe">￥{{item.ot_price}}</p> -->
          </div>
          <p class="iconfont cart-icon icon-gouwuchetab"></p>
        </div>
      </van-grid-item>
    </van-grid>
    <!-- <van-empty image="../assets/coming_soon.png"/> -->
    <div class="no-data"  v-if="!indexData.is_new.length">
      <i class="iconfont icon-jingqingqidai"></i>
    </div>
    <van-divider>我是有底线的</van-divider>
  </div>
</template>
<script>
import {index,UserInfo} from '../ajax'
import { Notify,Dialog } from 'vant';
export default {
  name: 'index',
  data () {
    return {
       indexData:{},
       search:'',
       color:'#3DCEB9'
    }
  },
  created(){
    this.env = process.env.NODE_ENV
    if(this.$route.query.admin_id){
      this.$store.commit('admin_id',this.$route.query.admin_id)
    }
    this.getUserInfo();
    this.getData();
  },
  computed:{
      sortStudent(){
          return this.sortByKey(this.indexData.banner, 'sort')
      }
  },
  methods:{
    sortByKey(array, key) {
      if(!array)return;
        return array.sort(function (a, b) {
            var x = a[key];
            var y = b[key];
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        });
    },
    getUserInfo(){
      let wxUserInfo = this.$store.getters.wxUserInfo;
      const data = {
        openid:wxUserInfo.openid
      }
      UserInfo(data).then(res=>{
          this.$store.commit('user_info',res);
          wxUserInfo = res;
      })
      if(wxUserInfo.is_adopt>=2 && wxUserInfo.group_id==0 && wxUserInfo.role_type >= 0 ){
        Dialog.alert({ message: '用户未选择所属公司,请跳转选择公司后使用?' }).then(()=>{
          this.$router.push('/company');
        })
      }else if(this.$store.getters.wxUserInfo.token){
        if(this.$store.getters.wxUserInfo.is_adopt !== 1){
          Dialog({ message: '该用户暂未审核' });
        }
      }else{
        Dialog.confirm({ message: '用户未登陆,是否跳转登录?' }).then(res=>{
          this.$router.push('/login');
        }).catch(()=>{});
      }
    },
    getData(){
        const data = {
            admin_id:this.$route.query.admin_id?this.$route.query.admin_id:this.$store.getters.admin_id,
            center_ids:this.$store.getters.wxUserInfo.center_ids?(this.$store.getters.wxUserInfo.center_ids).toString():null
        }
        index(data).then(res=>{
          this.indexData = res;
        })
    },
    onSearch(e){
      if(e){
        this.$router.push({path:'/productList',query:{search:e}})
      }
    }
  }
}
</script>
<style scoped lang="scss">
$red:#FF5245;
$gray:#9B9B9B;
$green:#3DCEB9;
$white:#fff;
$blue:rgb(171, 185, 199);
$green1:#67C23A;
$yellow:#E6A23C;
$red1:#F56C6C;
$list: $red, $gray, $green, $white, $blue, $green1, $yellow, $red1;
$random-color: random(length($list));
.body{
  margin-bottom:3rem;
  background: $white;
  .swipe{
    width: 100%;
    height:10rem;
    .van-image{
      width: 100%;
      height:10rem;
    }
  }
  .grid{
    background: $white;
    >>> .van-grid-item__content{
      background: $white;
      padding: 0;
    }
    .grid-pic{
      width: 2.5rem;
      height: 2.5rem;
      border: 0.2rem solid nth($list, $random-color);
    }
    .grid-title{
      font-size: 1rem;
      font-weight: 600;
    }
  }
  .van-grid-item{
    width: 50%;
  }
  .new-title{
    width: 80%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2rem;
    font-size: 0.9rem;
    font-weight: bolder;
    white-space: nowrap;
    word-break: break-all;
  }
  .new-info{
    width:80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .my-price{
      color:$red;
      font-weight: 700;
      font-size: 1rem;
    }
    .ot-price{
      font-size: 0.8rem;
      color: $gray;
      text-decoration: line-through;
    }
    .icon-qiang{
      color: $red;
      font-size: 2rem;
    }
    .cart-icon{
      background: $red;
      color: $white;
      width: 1.5rem;
      height: 1.5rem;
      text-align: center;
      line-height: 1.5rem;
      border-radius: 50%;
      font-size: 1rem;
    }
    .hot-icon{
      font-size: 1.5rem;
      color: $red;
    }
  }
  .van-cell__title{
    font-weight: bolder;
    font-size: 1.2rem;
  }
  .van-card{
    background: $white;
  }
  .no-data{
    color: #999;
    text-align: center;
    padding: 2rem 0;
  }
  .act-content{
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
  }
}
</style>
